﻿@using RuoVea.ExUtil;
@using RuoVea.ExConfig;
@using RuoVea.ExSugar
@using RuoVea.H5DS.Models
@inject SugarRepository<H5ServerInfo> _serverInfoRepository;
@{
    Layout = "";
    var images = (await _serverInfoRepository.GetFirstAsync(x => x.Code == "Images"))?.Content;
    if (images.IsNullOrWhiteSpace())
        images = AppSettings.app("H5Options", "images");
}
<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>H5模板设计</title>
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_157397_ujac0trx9i.css">
    <script>const data = '@images'</script>
    <script src="~/js/index.js" type="text/javascript"></script>
    <link href="~/lib/swiper.min.css" rel="stylesheet">
    <link href="~/lib/antd.min.css" rel="stylesheet">
    <!-- 编辑器所需第三方资源库 -->
    <script src="~/lib/swiper.min.js"></script>
    <script src="~/lib/jquery.min.js"></script>
    <script src="~/lib/h5ds.vendor.min.js"></script>
    <!-- 外部引入antd -->
    <script src="~/lib/moment.min.js"></script>
    <script src="~/lib/antd.min.js"></script>
    <!-- 引入打包后的libs包 -->
    <link href="~/lib/style.css" rel="stylesheet">
    <script src="~/lib/index.js" type="text/javascript"></script>
    <style>
        .h5ds-last-power {
            display: none;
        }
        .h5ds-header .h5ds-logo
         {
            display: none !important
        }
       .h5ds-header .h5ds-publish-box a.h5ds-basic-btn-min:nth-child(1){
            display: none !important
       }
     .h5ds-header .h5ds-publish-box  a.h5ds-btn-min:nth-child(2){
            display: none !important
       }
    </style>
</head>

<body>
    <div id="App"></div>
    <div id="result"></div>
    <script>

        $(function () {
            /**
             * 参数说明：
              callBack, // 渲染完成后的回调函数 Function
              data, // 默认加载的数据 Object
              plugins = [], // 加载的插件名称 eg: ['demo']
              imageSourceModal, // 图片资源弹窗 ReactDOM
              soundSourceModal, // 音乐资源弹窗 ReactDOM
              template, // 单页模板列表 ReactDOM
              publishHost = '', // 发布应用的HOST地址：eg: http://localhost:8888
              pluginsHost = '.', // 插件加载地址，默认： '.'，自动会加上 '/plugins'
              publishApp, // 发布APP。Function return Promise
              saveApp, // 保存APP 。 Function return Promise
              headerNav, // 右上角的链接。右上角可以自定义菜单 ReactDOM
              savePage, // 收藏页面调用 Function return Promise
              saveLayer, // 收藏图层调用 Function reutrn Promise
              appId = 'test_app_id', // appId
              target = document.querySelector('body') // 默认渲染的区域，默认是document.querySelector('body')
             */
 

            // 定义 saveData 方法，返回一个 Promise
            const saveData = (data) => {
                return new Promise((resolve, reject) => {
                    $.ajax({
                        url: 'H5DS/submit', // 请求的 URL
                        type: 'POST',       // 请求方法，改为 POST
                        contentType: 'application/json', // 设置发送数据的格式为 JSON
                        data: JSON.stringify({ id:`@ViewBag.appId`, content: JSON.stringify(data.data) }), // 将数据转换为 JSON 字符串
                        dataType: 'json',  // 期望返回的数据类型，这里是 JSON
                        success: function (res) {
                            // 请求成功时的回调函数
                            console.log('请求成功:', res);
                            if(res.code==200)
                            {
                                antd.message.success('保存成功');
                                resolve(res); // 使用 resolve 返回成功的结果
                            }
                            else{
                                antd.message.error('保存失败');
                                reject(res.message); 
                            }
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时的回调函数
                            console.error('请求失败:', status, error);
                            antd.message.error('保存失败');
                            reject(error); 
                        }
                    });
                });
            };
           
            $.ajax({
                url: 'H5DS/data/@ViewBag.appId', 
                type: 'GET',           
                dataType: 'json',  
                success: function (data) { 
                    if (data.code == 200) {
                        var newjson = JSON.parse(data.data.content);
                        H5DSInit(newjson);
                    }else{
                        antd.Modal.error({
                            title: '错误提示', // 标题
                            content: data.message, // 错误信息
                            onOk() {}
                        });
                    }
                },
                error: function (xhr, status, error) {
                    // 请求失败时的回调函数
                    console.error('请求失败:', status, error);
                }
            });

            const H5DSInit = (data) => {
                new H5DSCore({
                    data: data,
                    appId: '@ViewBag.appId',
                    target: document.getElementById('App'),
                    saveApp: saveData, // 传入 saveApp 方法
                    options: {
                            imageSourceModal: {
                                title: '自定义图片资源管理器', // 自定义标题
                                loadImages: async () => {
                                    // 自定义图片加载逻辑
                                    // 这里可以是从服务器获取图片资源，也可以是静态数据
                                    return [
                                        { url: '/lib/bgimg/bg.jpg', name: '图片1' }
                                    ];
                                },
                                onImageClick: (image) => {
                                    console.log('点击了图片:', image);
                                    // 这里可以处理图片的选中逻辑
                                }
                            }
                        }
                });
            };
        });
    </script>
</body>
</html>
